<template>
  <el-container>
    <el-header>
      <Header></Header>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <Aside></Aside>
      </el-aside>
      <el-main>
        <h3 style="text-align: center">预览文章</h3>
        <table width="98%" border class="table table-bordered">
          <tbody>
            <tr>
              <td align="right">ID</td>
              <td>{{ form.itemid }}</td>
            </tr>
            <tr>
              <td align="right">分类</td>
              <td v-html="form.cat_pos"></td>
            </tr>
            <tr>
              <td align="right">标题</td>
              <td>{{ form.title }}</td>
            </tr>
            <tr>
              <td align="right">内容</td>
              <td>
                <div style="width: 600px" v-html="form.content"></div>
              </td>
            </tr>
            <tr>
              <td align="right">缩略图</td>
              <td>
                <img v-if="form.thumb" :src="form.thumb" style="width: 200px" />
              </td>
            </tr>
            <tr>
              <td align="right">状态</td>
              <td>{{ form.flag }}</td>
            </tr>
            <tr>
              <td align="right">添加时间</td>
              <td>{{ form.addtime }}</td>
            </tr>
            <tr>
              <td align="right">编辑时间</td>
              <td>{{ form.edittime }}</td>
            </tr>
            <tr>
              <td align="right">添加人</td>
              <td>{{ form.username }}</td>
            </tr>
            <tr>
              <td align="right">编辑人</td>
              <td>{{ form.editor }}</td>
            </tr>
          </tbody>
        </table>
      </el-main>
    </el-container>
    <el-footer>
      <Footer></Footer>
    </el-footer>
  </el-container>
</template>

<script scoped>
export default {
  data() {
    return {
      form: {},
    };
  },
  async mounted() {
    let itemid = parseInt(this.$route.query.itemid);
    const data = await this.$axios.post("/api/article/preview", {
      itemid: itemid,
      formated: 1,
    });
    this.form = data.data;
  },
  methods: {},
};
</script>

<style>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
}

.el-main {
  color: #333;
}
</style>
